<!DOCTYPE html>
<html>
<head>
	<title>标签页</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
			<li><a href="#Profile" data-toggle="tab">Profile</a></li>
			<li class="dropdown">
				<a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#dropone" tabindex="-1" data-toggle="tab">one</a></li>
					<li><a href="#droptwo" tabindex="-1" data-toggle="tab">two</a></li>
				</ul>
			</li>
		</ul>
		<div id="MyTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="home">
				<p>Hello,nihaoya!!!!</p>
				<p>Hello,nihaoya!!!!</p>
				<p>Hello,nihaoya!!!!</p>
				<p>Hello,nihaoya!!!!</p>
			</div>
			<div class="tab-pane fade" id="Profile">
				<p>ohhhhhhhhhhhhhh!!!!</p>
				<p>ohhhhhhhhhhhhhh!!!!</p>
				<p>ohhhhhhhhhhhhhh!!!!</p>
				<p>ohhhhhhhhhhhhhh!!!!</p>
			</div>
			<div class="tab-pane fade" id="dropone">
				<p>Hello!!!!</p>
				<p>Hello!!!!</p>
				<p>Hello!!!!</p>
				<p>Hello!!!!</p>
			</div>
			<div class="tab-pane fade" id="droptwo">
				<p>ohooooooooooooooo!!!!</p>
				<p>ohooooooooooooooo!!!!</p>
				<p>ohooooooooooooooo!!!!</p>
				<p>ohooooooooooooooo!!!!</p>
			</div>
		</div>
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	// 默认显示最后一个div
	// $('#myTab a:last').tab('show');
	// // 选择任意一个,这里是显示第2个
	// $('#myTab li:eq(1) a').tab('show');
	// // 绑定一个事件
	// $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){
	// 	alert('切换了');
	// })
</script>
</body>
</html>